<template>
  <div class="classify-home select-none">
    <div class="flex items-center">
      <div v-for="item in value" :key="item.id" class="group relative">
        <!-- /px-6 py-3 -->
        <div
          class="capitalize font-medium text-[.75rem] text-[#1F2937] cursor-pointe rounded-full px-[.75rem] py-[.4375rem] cursor-pointer flex items-center gap-2 group-hover:bg-[#F5F4F4]"
        >
          <nuxt-link
            class="text-nowrap capitalize whitespace-nowrap"
            :to="localePath(`${item.route.path}`)"
            :target="item.route.path == '/news' ? '_blank' : '_self'"
            @click.native="handleLinkClick(item.route.path)"
          >
            {{ item.name }}
          </nuxt-link>
          <!-- :class="item.isOpen ? '' : ''" -->
          <div class="group/item">
            <div
              class="size-4 flex items-center justify-center rounded-full group-hover/item:bg-[#FF4E33] group-hover/item:text-white transition-all duration-300"
              v-if="item._child && item._child.length"
              @click.stop="switchSubMenu(item)"
            >
              <i :class="item.isOpen ? '' : ''" class="el-icon-arrow-down text-[0.66rem] text-center transition-transform duration-300 transform"></i>
            </div>
          </div>
        </div>
        <div v-if="item._child && item._child.length" class="!z-[99999] absolute left-0 top-[130%] bg-transparent">
          <div
            class="grid transition-all duration-300 ease-in-out"
            :class="[item.isOpen ? 'grid-rows-[1fr] opacity-100 translate-y-0' : 'grid-rows-[0fr] opacity-0 -translate-y-2']"
          >
            <div class="min-w-[450px] overflow-hidden shadowgg rounded-[1rem]">
              <div class="grid overflow-hidden grid-cols-2 p-4 bg-white">
                <div v-for="child in item._child" :key="child.id" class="hovdrs cursor-pointer" @click.stop="jumpPage(child)">
                  <div class="flex gap-3 items-center p-3">
                    <div class="size-[1.13rem] flex-none">
                      <img
                        :src="$globalFn.imgPrefixUrl(child.pic_image || '')"
                        alt="Category active icon"
                        title="Selected category"
                        class="size-full"
                      />
                      <!-- <img
                        :src="$globalFn.imgPrefixUrl(child.pic_image || '')"
                        alt="Category icon"
                        title="Category thumbnail"
                        class="size-full group-hover/item:hidden flex-none"
                      /> -->
                    </div>
                    <div class="font-medium text-[.75rem] capitalize line-clamp-1 w-full">
                      {{ child.name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: [Array, Object],
        default: null
      }
    },
    data() {
      return {
        id: null
      }
    },
    mounted() {
      // 移除全局监听
    },
    beforeDestroy() {
      // 移除全局监听
    },
    methods: {
      handleLinkClick(path) {
        // 如果是当前路径，则刷新页面并滚动到顶部
        if (this.$route.path === this.localePath(path)) {
          window.location.reload()
          window.scrollTo({
            top: 0,
            behavior: 'smooth'
          })
        }
      },
      jumpPage(item) {
        // 跳转前关闭所有展开的菜单
        this.$store.commit(
          'initData/setCategoryData',
          this.value.map(i => ({
            ...i,
            isOpen: false
          }))
        )
        this.$router.push({
          path: this.localePath(item.route.path)
        })
      },
      switchSubMenu(item) {
        event.stopPropagation() // 阻止事件冒泡
        this.$store.commit(
          'initData/setCategoryData',
          this.value.map(i => ({
            ...i,
            isOpen: i.id === item.id ? !i.isOpen : false
          }))
        )
        // 添加document点击监听，但只监听一次
        const clickHandler = e => {
          if (!this.$el.contains(e.target)) {
            this.$store.commit(
              'initData/setCategoryData',
              this.value.map(i => ({ ...i, isOpen: false }))
            )
            document.removeEventListener('click', clickHandler)
          }
        }
        document.addEventListener('click', clickHandler)
      }
      // handleClickOutside(event) {
      //   if (!this.$el.contains(event.target)) {
      //     this.$nextTick(() => {
      //       this.$store.commit(
      //         "initData/setCategoryData",
      //         this.value.map((item) => ({
      //           ...item,
      //           isOpen: false,
      //         }))
      //       );
      //     });
      //   }
      // },
    }
  }
</script>
<style lang="less" scoped>
  .classify-home {
    .group:hover {
      > div:first-child {
        color: var(--primary-color);
      }
    }
  }
  .shadowgg {
    box-shadow: 0rem 0rem 0.63rem 0rem rgba(0, 0, 0, 0.1);
  }
  .hovdrs {
    @apply grayscale;
  }
  .hovdrs:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffebe5 100%);
    border-radius: 0 32px 32px 0;
    color: #ff4e33 !important;
    @apply duration-300 transition-colors grayscale;
  }
</style>
